<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <template>
            <a-col :md="4" :sm="8">
              <a-form-item label="摄像机名称">
                <a-input
                  placeholder="请输入摄像机名称查询"
                  v-model="queryParam.name"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="6">
              <a-form-item label="按域筛选:">
                <a-select placeholder="请选择域" v-model="queryParam.regionId">
                  <a-select-option
                    v-for="item in regionList"
                    :key="item.regionId"
                    :value="item.regionId"
                    @click="handler(item)"
                  >
                    {{ item.name }}（{{
                      item.state === "1"
                        ? "在线"
                        : item.state === "2"
                        ? "离线"
                        : "禁用"
                    }}）
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="8">
              <a-form-item label="是否在线:">
                <a-select
                  placeholder="请选择是否在线"
                  showSearch
                  showArrow
                  optionFilterProp="children"
                  :getPopupContainer="(node) => node.parentNode"
                  :defaultActiveFirstOption="false"
                  v-model="queryParam.online"
                >
                  <a-select-option value="1">是</a-select-option>
                  <a-select-option value="0">否</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </template>
          <a-col :md="4" :sm="8">
            <span
              style="float: left; overflow: hidden"
              class="table-page-search-submitButtons"
            >
              <a-button type="primary" @click="searchQuery" icon="search"
                >查询</a-button
              >
              <a-button
                type="primary"
                @click="resetParam"
                icon="reload"
                style="margin-left: 8px"
                >重置
              </a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator" style="border-top: 5px" v-show="showed">
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay" @click="handleMenuClick">
          <a-menu-item key="2">
            <a-icon type="setting" />
            <span>批量启用</span>
          </a-menu-item>
          <a-menu-item key="3">
            <a-icon type="setting" />
            <span>批量停用</span>
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px">
          批量操作
          <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a
          style="font-weight: 600"
          >{{ selectedRowKeys.length }}</a
        >项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        bordered
        size="middle"
        rowKey="cameraId"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <a href="javascript:;" @click="editCamera(record)" v-show="showed"
            >编辑</a
          >
          <a-divider type="vertical" v-show="showed" />
          <a href="javascript:;" @click="cameraDetail(record)">详情</a>
          <a-divider type="vertical" v-show="showed" />
          <a-popconfirm
            title="确定此操作吗?"
            @confirm="() => changeStatus(record)"
            l
            v-show="showed"
          >
            <a>{{ record.used === "1" ? "停用" : "启用" }}</a>
          </a-popconfirm>
        </span>
      </a-table>
    </div>
    <camera-edit-modal
      ref="cameraeditmodal"
      @ok="editModalOk"
      @yes="editModalYes(record)"
    ></camera-edit-modal>
    <camera-tbd-edit-modal
      ref="cameratbdeditmodal"
      :forms="this.forms"
      :cameraId="this.cameraId"
      @ok="editModalOk"
    ></camera-tbd-edit-modal>
    <camera-detail-modal
      ref="cameradetailmodal"
      :forms="this.forms"
      :cameraId="this.cameraId"
      @ok="editModalOk"
    ></camera-detail-modal>
    <camera-tbds-edit-modal
      ref="cameratbdseditmodal"
      @ok="editModalOk"
    ></camera-tbds-edit-modal>
  </a-card>
</template>

<script>
import CameraEditModal from "./modules/CameraEditModal";
import CameraTbdEditModal from "./modules/CameraTbdEditModal";
import CameraDetailModal from "./modules/CameraDetailModal";
import CameraTbdEditsModal from "./modules/CameraTbdEditsModal";
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import { getAction, postAction } from "@/api/manage";
import { devList, cameraEdit } from "@/api/api";
import { values } from "lodash";
export default {
  name: "CameraList",
  mixins: [JeecgListMixin],
  components: {
    CameraEditModal,
    CameraTbdEditModal,
    CameraDetailModal,
    CameraTbdEditsModal,
  },
  data() {
    return {
      domainType: "",
      regionIdOne: "",
      showed: true,
      description: "这是摄像机管理页面",
      queryParam: {
        name: undefined,
        regionId: undefined,
        online: undefined,
      },
      form: this.$form.createForm(this),
      regionList: [],
      forms: {
        package_format: "",
        v_encode: "",
        v_bitrate: "",
        v_framerate: "",
        v_resolution: "",
        a_encode: "",
        a_samplerate: "",
        a_bitrate: "",
        profile: "",
        rc_mode: "",
      },
      columns: [
        {
          title: "名称",
          align: "center",
          dataIndex: "name",
          width: 60,
        },
        {
          title: "所属设备",
          align: "center",
          dataIndex: "devName",
          width: 50,
        },
        // {
        // 	title: '所属设备编号',
        // 	align: "center",
        // 	dataIndex: 'devCode',
        // 	width: 80
        // },

        {
          title: "云台",
          align: "center",
          width: 60,
          dataIndex: "hasPtz",
          customRender: function (text) {
            if (text === "1") {
              return "有";
            } else if (text === "0") {
              return "无";
            }
          },
        },
        {
          title: "状态",
          align: "center",
          width: 60,
          dataIndex: "state",
          customRender: function (text) {
            if (text === "1") {
              return "在线";
            } else if (text === "2") {
              return "离线";
            } else if (text === "3") {
              return "禁用";
            }
          },
        },
        {
          title: "地点",
          align: "center",
          width: 60,
          dataIndex: "location",
        },
        {
          title: "描述",
          align: "center",
          width: 60,
          dataIndex: "cameraDesc",
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: {
            customRender: "action",
          },
          align: "center",
          width: 90,
        },
      ],
      url: {
        list: "/dev/camera/all-page",
        usedBatch: "/dev/camera/setused-batch",
      },
    };
  },
  created() {
    //初始化数据，获取域
    getAction("/dev/getregions").then((res) => {
      if (res.code == "00000") {
        this.regionList = res.data;
        this.showed = true;
        this.domainType = res.data[0].domainType;
        this.regionIdOne = res.data[0].regionId;
        this.queryParam.regionId = res.data[0].regionId;
        this.loadData();
      } else {
        this.$message.warning("获取型号错误");
      }
    });
    // console.log(this.forms);
  },
  mounted() {
    // console.log(this.cameraId);
    // this.cameraEdit()
  },
  methods: {
    handler(item) {
      this.domainType = item.domainType;
      console.log(item);
      console.log(item.domainType);
    },
    handleMenuClick(e) {
      if (e.key == 2) {
        this.batchOpt(this.url.usedBatch, "1");
      } else if (e.key == 3) {
        this.batchOpt(this.url.usedBatch, "0");
      }
    },
    bianji(record) {
      if (
        record.devModel == "TPD-8CH-4436" ||
        record.devModel == "FY-X10D-3538"
      ) {
        const params = {
          cameraId: record.cameraId,
        };
        cameraEdit(params).then((res) => {
          console.log(res);
          this.cameraId = record.cameraId;
          this.forms = res.data;
          this.forms.package_format = res.data.package_format;
          this.forms.v_encode = res.data.v_encode;
          this.forms.v_framerate = res.data.v_framerate.defaultValue;
          this.forms.v_bitrate = res.data.v_bitrate.defaultValue;
          this.forms.a_encode = res.data.a_encode;
          // this.forms.a_samplerate = res.data.a_samplerate
          this.forms.a_bitrate = res.data.a_bitrate.defaultValue;
          this.forms.profile = res.data.profile;
          this.forms.rc_mode = res.data.rc_mode;
          console.log(this.forms.rc_mode);
          JSON.parse(res.data.jsonStr);
          console.log(JSON.parse(res.data.jsonStr));
          console.log(this.forms);
        });
        console.log(111);
        this.$refs.cameratbdeditmodal.show(record);
        this.$refs.cameratbdeditmodal.title = "编辑";

        this.$refs.cameratbdeditmodal.disableSubmit = false;
      } else {
        this.$refs.cameraeditmodal.show(record);
        this.$refs.cameraeditmodal.disableSubmit = false;
      }
    },
    // 编辑
    // editCamera: function (record) {
    //   console.log("====================编辑==============================");
    //   if (record.devModel == "FY-X10D-3538") {
    //     console.log("======FY-X10D-3538=======");
    //     this.$refs.cameratbdseditmodal.show(record);
    //     this.$refs.cameratbdseditmodal.disableSubmit = false;
    //   } else if (record.devModel == "TPD-8CH-4436") {
    //     console.log(record);
    //     console.log("============TPD-8CH-4436==============");
    //     const params = {
    //       cameraId: record.cameraId,
    //     };
    //     cameraEdit(params).then((res) => {

    //       this.cameraId = record.cameraId;
    //       this.forms = res.data;
    //       this.forms.package_format = res.data.package_format;
    //       this.forms.v_encode = res.data.v_encode;
    //       this.forms.v_framerate = res.data.v_framerate.defaultValue;
    //       this.forms.v_bitrate = res.data.v_bitrate.defaultValue;
    //       this.forms.a_encode = res.data.a_encode;
    //       this.forms.a_samplerate = res.data.a_samplerate;
    //       this.forms.a_bitrate = res.data.a_bitrate.defaultValue;
    //       this.forms.profile = res.data.profile;
    //       this.forms.rc_mode = res.data.rc_mode;

    //       console.log(this.forms.rc_mode);
    //       JSON.parse(res.data.jsonStr);
    //       console.log(JSON.parse(res.data.jsonStr));
    //       console.log(this.forms);

    //       console.log("编辑1111111111111111111111111111111111111111111");
    //       this.$refs.cameratbdeditmodal.show(record);
    //       this.$refs.cameraeditmodal.title = "编辑";
    //       this.$refs.cameratbdeditmodal.disableSubmit = false;
    //     });

    //     console.log("编辑2222222222222222222222222222222222222222222");
    //     this.$refs.cameratbdeditmodal.show(record);
    //     this.$refs.cameraeditmodal.title = "编辑";
    //     this.$refs.cameratbdeditmodal.disableSubmit = false;
    //   } else {
    //     console.log("=========大华IPC-DH-SD-6C3230UE-HN==========");
    //     this.$refs.cameraeditmodal.show(record);
    //     this.$refs.cameraeditmodal.title = "编辑";
    //     this.$refs.cameraeditmodal.disableSubmit = false;
    //   }

    //   // this.$refs.cameraeditmodal.show(record);
    //   // this.$refs.cameraeditmodal.title = "编辑";
    //   // this.$refs.cameraeditmodal.disableSubmit = false;

    //   // if(record.devModel == "TPD-8CH-4436"){
    //   // }else {
    //   // }
    // },

    // 编辑2
    // editCamera(record) {
    //   // console.log(this.cameraId);
    //   console.log(record);
    //   if (
    //     record.devModel === "TPD-8CH-4436" ||
    //     record.devModel === "FY-X10D-3538"
    //   ) {
    //     const params = {
    //       cameraId: record.cameraId,
    //     };
    //     cameraEdit(params).then((res) => {
    //       console.log(res);
    //       this.cameraId = record.cameraId;
    //       this.forms = res.data;
    //       this.forms.package_format = res.data.package_format;
    //       this.forms.v_encode = res.data.v_encode;
    //       this.forms.v_framerate = res.data.v_framerate.defaultValue;
    //       this.forms.v_bitrate = res.data.v_bitrate.defaultValue;
    //       this.forms.a_encode = res.data.a_encode;
    //       this.forms.a_bitrate = res.data.a_bitrate.defaultValue;
    //       this.forms.profile = res.data.profile;
    //       this.forms.rc_mode = res.data.rc_mode;
    //       console.log(this.forms);
    //     });
    //     console.log(111);
    //     this.$refs.cameratbdeditmodal.show(record);
    //     this.$refs.cameratbdeditmodal.disableSubmit = false;
    //   } else {
    //     this.$refs.cameraeditmodal.show(record);
    //     console.log("====================编辑传入recode==================");
    //     console.log(record);
    //     console.log(this.$refs.cameraeditmodal.show(record));
    //     this.$refs.cameraeditmodal.disableSubmit = false;
    //   }
    // },

    // 编辑
    editCamera(record) {
      this.recordValue = record;
      console.log(record);
      if (record.hasParam == "1") {
        const params = {
          cameraId: record.cameraId,
        };
        cameraEdit(params).then((res) => {
          console.log(res);

          if (res.data == "") {
            this.cameraId = record.cameraId;
          } else {
            this.cameraId = record.cameraId;
            this.forms = res.data;
            this.forms.package_format = res.data.package_format; //码流封装方式
            this.forms.v_encode = res.data.v_encode; //视频编码
            this.forms.v_bitrate.defaultValue = res.data.v_bitrate.defaultValue; //视频码率
            this.forms.v_bitrate.groupValue = res.data.v_bitrate.groupValue; //视频码率

            this.forms.v_framerate.defaultValue =
              res.data.v_framerate.defaultValue; //视频帧率
            this.forms.v_framerate.groupValue = res.data.v_framerate.groupValue; //视频帧率

            this.forms.v_resolution = res.data.v_resolution; //视频分辨率
            this.forms.a_encode = res.data.a_encode; //音频编码
            this.forms.a_samplerate.defaultValue =
              res.data.a_samplerate.defaultValue; //音频采样率
            this.forms.a_samplerate.groupValue =
              res.data.a_samplerate.groupValue; //音频采样率

            this.forms.a_bitrate.defaultValue = res.data.a_bitrate.defaultValue; //音频码率
            this.forms.a_bitrate.groupValue = res.data.a_bitrate.groupValue; //音频码率

            this.forms.profile = res.data.profile; //编码档次
            this.forms.rc_mode = res.data.rc_mode; //码率控制
          }
        });

        this.$refs.cameratbdeditmodal.title = "编辑";
        this.$refs.cameratbdeditmodal.show(record);
        this.$refs.cameratbdeditmodal.disableSubmit = false;
      } else {
        this.$refs.cameraeditmodal.show(record);
        console.log("====================编辑传入recode==================");
        console.log(record);
        this.$refs.cameraeditmodal.title = "编辑";
        console.log(this.$refs.cameraeditmodal.show(record));
        this.$refs.cameraeditmodal.disableSubmit = false;
      }
    },
    editModalOk() {
      // 修改 成功时，重载列表
      this.loadData();
    },

    editModalYes() {
      this.loadData();
      this.editCamera(this.recordValue);
    },

    // 详情
    // cameraDetail: function (record) {
    //   console.log(record);
    //   if (record.devModel == "FY-X10D-3538") {
    //     this.$refs.cameradetailmodal.show(record);
    //     this.$refs.cameradetailmodal.title = "详情";
    //     this.$refs.cameradetailmodal.disableSubmit = false;
    //   } else if (record.devModel == "TPD-8CH-4436") {
    //     const params = {
    //       cameraId: record.cameraId,
    //     };
    //     cameraEdit(params).then((res) => {
    //       console.log(res);
    //       this.cameraId = record.cameraId;
    //       this.forms = res.data;
    //       this.forms.package_format = res.data.package_format;
    //       this.forms.v_encode = res.data.v_encode;
    //       this.forms.v_framerate = res.data.v_framerate.defaultValue;
    //       this.forms.v_bitrate = res.data.v_bitrate.defaultValue;
    //       this.forms.a_encode = res.data.a_encode;
    //       // this.forms.a_samplerate = res.data.a_samplerate
    //       this.forms.a_bitrate = res.data.a_bitrate.defaultValue;
    //       this.forms.profile = res.data.profile;
    //       this.forms.rc_mode = res.data.rc_mode;
    //       console.log(this.forms.rc_mode);
    //       JSON.parse(res.data.jsonStr);
    //       console.log(JSON.parse(res.data.jsonStr));
    //       console.log(this.forms);
    //     });
    //     console.log(11112121212);
    //     this.$refs.cameradetailmodal.show(record);
    //     this.$refs.cameradetailmodal.title = "详情";
    //     this.$refs.cameradetailmodal.disableSubmit = true;
    //   } else {
    //     this.$refs.cameraeditmodal.show(record);
    //     this.$refs.cameraeditmodal.title = "详情";
    //     this.$refs.cameraeditmodal.disableSubmit = true;
    //   }

    //   // this.$refs.cameraeditmodal.show(record);
    //   // this.$refs.cameraeditmodal.title = "详情";
    //   // this.$refs.cameraeditmodal.disableSubmit = true;

    //   // if(record.devModel == "TPD-8CH-4436"){

    //   // } else {

    //   // }
    //   // if(record.devModel == "TPD-8CH-4436" || record.devModel == "FY-X10D-3538") {

    //   // } else {

    //   // }
    // },

    // 详情备份2
    // cameraDetail: function (record) {
    //   if (
    //     record.devModel === "TPD-8CH-4436" ||
    //     record.devModel === "FY-X10D-3538"
    //   ) {
    //     this.$refs.cameratbdeditmodal.show(record);
    //     this.$refs.cameratbdeditmodal.title = "详情";
    //     this.$refs.cameratbdeditmodal.disableSubmit = false;
    //   } else {
    //     this.$refs.cameraeditmodal.show(record);
    //     this.$refs.cameraeditmodal.title = "详情";
    //     this.$refs.cameraeditmodal.disableSubmit = true;
    //   }
    // },

    cameraDetail: function (record) {
      if (record.hasParam == "1") {
        this.$refs.cameratbdeditmodal.show(record);
        this.$refs.cameratbdeditmodal.title = "详情";
        this.$refs.cameratbdeditmodal.disableSubmit = false;
      } else {
        this.$refs.cameraeditmodal.show(record);
        this.$refs.cameraeditmodal.title = "详情";
        this.$refs.cameraeditmodal.disableSubmit = true;
      }
    },

    changeStatus(record) {
      let objTemp = {};
      objTemp.used = record.used == 0 ? 1 : 0;
      objTemp.cameraId = record.cameraId;
      postAction("/dev/camera/set-used", objTemp).then((res) => {
        if (res.code == "00000") {
          this.$message.success("修改成功");
          this.loadData();
        } else {
          this.$message.warning("修改失败:" + res.msg);
        }
      });
    },

    // 重置
    resetParam() {
      this.queryParam.name = undefined;
      this.queryParam.online = undefined;
      this.queryParam.regionId = this.regionIdOne;
      this.domainType = "1";
      this.loadData(1);
    },
  },
};
</script>
<style scoped>
@import "~@assets/less/common.less";
</style>
